<template>
	<view>
		<!-- 任务信息部分 -->
		<view
			v-for="(item, index) in taskInfos"
			:key="index"
			style="margin-bottom: 1px;"
		>
			<!-- <CellInput
				v-if="item.prop !== 'repairDesc'"
				v-model="item.value"
				:isReadonly="item.readonly"
				:label="item.label"
				:placeholder="item.placeholder"
				:theme="item.theme"
				:inputBorder="item.isBorder ? item.border : 'none'"
				:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
				:rightIcon="item.isRight ? item.rightIcon : ''"
				:rightIconColor="item.isRight ? item.rightIconColor : ''"
				@handleRightIconClick="handleRightIconClick($event, item)"
			/> -->
			
			<CellInput
				v-if="item.prop !== 'repairDesc'"
				v-model="item.value"
				:isRequire="item.isRequire"
				:isReadonly="item.readonly"
				:isTitleIcon="item.isTitleIcon"
				:titleIcon="item.titleIcon"
				:label="item.label"
				:placeholder="item.placeholder"
				:theme="item.theme"
				:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
				:isInputIcon="item.isInputIcon"
				:inputIcon="item.inputIcon"
				:inputIconColor="item.inputIconColor"
				:inputBorder="item.isBorder ? item.border : 'none'"
				:rightIcon="item.isRight ? item.rightIcon : ''"
				:rightIconColor="item.isRight ? item.rightIconColor : ''"
				@handleClickLeftIcon="handleClickLeftIcon($event, item)"
				@handleRightIconClick="handleRightIconClick($event, item)"
				@handleClickInputIcon="handleClickInputIcon($event, item)"
				@input="handleInput"
			/>
			
			<RepairDesc
				v-if="item.prop === 'repairDesc'"
				:label="item.label"
				:textMsgList="item.textMsgList"
				:pictureList="item.pictureList"
				:voiceList="item.voiceList"
				:videoList="item.videoList"
				@handleClick="handleRepairDesc($event, item)"
			/>
		</view>
		
		<!-- 驳回信息 -->
		<view>
			<!-- 驳回状态 -->
			<view
				v-if="isShowRejectedInfo"
				class="flex justify-between mar-t-10"
				style="background-color: #ff7474;"
			>
				<view class="w-px-90 mar-x-15 flex align-center font-14 color-white pad-y-5"
					:style="{
						borderRight: '1px #eeeeee solid',
					}"
				>
					<text>驳回状态</text>
				</view>
				
				<view class="flex flex-1 align-center pad-y-5">
					<view class="flex align-center flex-1 h-px-40 font-14 color-white">
						<text>{{ auditState === 2 ? '已驳回' : '' }}</text>
					</view>
				</view>
			</view>
			
			<!-- 驳回原因 -->
			<view
				v-if="isRejectedReason"
				class="flex justify-between mar-t-10"
				style="background-color: #ff7474;"
			>
				<view class="w-px-90 mar-x-15 flex align-center font-14 color-white pad-y-5"
					:style="{
						borderRight: '1px #eeeeee solid',
					}"
				>
					<text>驳回原因</text>
				</view>
				
				<view class="flex flex-1 align-center pad-y-5">
					<view class="flex align-center flex-1 h-px-40 font-14 color-white">
						<text>{{ rejectedReason }}</text>
					</view>
				</view>
			</view>
			
			<!-- 驳回时间 -->
			<view
				v-if="isShowRejectedInfo"
				class="flex justify-between mar-t-10"
				style="background-color: #ff7474;"
			>
				<view class="w-px-90 mar-x-15 flex align-center font-14 color-white pad-y-5"
					:style="{
						borderRight: '1px #eeeeee solid',
					}"
				>
					<text>驳回时间</text>
				</view>
				
				<view class="flex flex-1 align-center pad-y-5">
					<view class="flex align-center flex-1 h-px-40 font-14 color-white">
						<text>{{ auditDate }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 转单原因 -->
		<view
			v-if="isTransferOrder"
			class="flex justify-between mar-t-10"
			style="background-color: #ff7474;"
		>
			<view class="w-px-90 mar-l-15 flex align-center font-14 color-white pad-y-3"
				:style="{
					borderRight: '1px #eeeeee solid',
				}"
			>
				<text>转单原因</text>
			</view>
			
			<view class="flex flex-1 align-center pad-y-3 mar-l-10">
				<view class="flex align-center flex-1 h-px-40 font-14 color-white">
					<text>{{ transferOrderReason }}</text>
				</view>
			</view>
		</view>
		
		<!-- 经理列表 -->
		<view
			v-if="isShowManager"
			class="flex flex-wrap align-center bg-dbdcf8 mar-y-10 pad-x-15"
		>
			<CustomRadio
				class="mar-y-5 mar-r-10"
				v-for="(item, index) in managerList"
				:groudId="1"
				:key="index"
				:iconType="customRadioIconType"
				:label="item.RealName"
				:name="item.UserName"
				:value="item.Checked"
				:in-active-value="1"
				:active-value="0"
				@handleRadioClick="handleChangeManager($event, item)"
			/>
		</view>
		
		<!-- 派工结果 -->
		<view
			v-if="dispatchResult"
			class="flex justify-between mar-t-10 bg-3aa1ff"
		>
			<view class="w-px-90 h-px-40 mar-x-15 flex align-center font-14 color-white"
				:style="{
					borderRight: '1px #eeeeee solid',
				}"
			>
				<text>派工结果</text>
			</view>
			
			<view class="flex flex-1 align-center">
				<view class="flex align-center flex-1 h-px-40 font-14 color-white">
					<text>{{ dispatchResult }}</text>
				</view>
				
				<view class="w-px-20 mar-r-15">
					<text class="iconfont icon-dianhua font-14 color-white" @click="callHim(dispatchTel)"></text>
				</view>
			</view>
		</view>
		
		<!-- 车辆信息 -->
		<view class="mar-t-10">
			<view
				v-for="(item, index) in cartInfos"
				:key="index"
				style="margin-bottom: 1px;"
			>
				<CellInput
					v-if="
						item.prop !== 'configInfo' &&
						item.prop !== 'componentInfo' &&
						item.prop !== 'sceneDetails' &&
						item.prop !== 'customerLevelInfo'
					"
					v-model="item.value"
					:isRequire="item.isRequire"
					:isReadonly="item.readonly"
					:isTitleIcon="item.isTitleIcon"
					:titleIcon="item.titleIcon"
					:label="item.label"
					:placeholder="item.placeholder"
					:theme="item.theme"
					:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
					:isInputIcon="item.isInputIcon"
					:inputIcon="item.inputIcon"
					:inputIconColor="item.inputIconColor"
					:inputBorder="item.isBorder ? item.border : 'none'"
					:rightIcon="item.isRight ? item.rightIcon : ''"
					:rightIconColor="item.isRight ? item.rightIconColor : ''"
					@handleClickLeftIcon="handleClickLeftIcon($event, item)"
					@handleRightIconClick="handleRightIconClick($event, item)"
					@handleClickInputIcon="handleClickInputIcon($event, item)"
					@focus="handleDateComponent($event, item)"
					@input="handleInput($event, item)"
				/>
				
				<RepairDesc 
					v-if="item.prop === 'sceneDetails'"
					:label="item.label"
					:textMsgList="item.textMsgList"
					:pictureList="item.pictureList"
					:voiceList="item.voiceList"
					:videoList="item.videoList"
					@handleClick="handleRepairDesc($event, item)"
				/>
				
				<Cell
					v-if="
						item.prop === 'configInfo' ||
						item.prop === 'componentInfo' ||
						item.prop === 'customerLevelInfo'
					"
					:title="item.label"
					:isLink="item.value ? item.value.isLink : false"
					:theme="item.theme"
					:cellHeight="item.height ? item.height : 50"
					style="margin-top: 1px;"
					@handleCellClick="handleCellClick($event, item)"
				/>
			</view>
		</view>
		
		<!-- 故障件信息 -->
		<view class="mar-t-10">
			<view
				class="flex justify-between align-center h-px-40 bg-dbdcf8 font-14 pad-x-15"
			>
				<text>故障件</text>
				<text v-if="isAddRepair" class="iconfont icon-tianjia" style="color: #3c9cff;" @click="openRepairClassify()"></text>
			</view>
			
			<!-- 故障件列表 -->
			<view>
				<Classify
					v-for="(item, index) in repairList"
					:ref="'classify' + index"
					:key="index"
					:index="index"
					:classifyTitle="item.classifyTitle"
					:classifyName="item.classifyName"
					:classifyData="item.list"
					:titleBg="item.titleBg ? item.titleBg : '#eeeeee'"
					:titleColor="item.titleColor ? item.titleColor : '#333333'"
					:isExpand="item.isExpand"
					:isEdit="true"
					:isDel="item.isDel"
					@handleExpand="handleExpand"
					@handleAttachment="handleAttachment"
					@handleWatchUsedQuantity="handleWatchUsedQuantity"
					@handleSelectRepairType="handleSelectRepairType"
					@handleSelectSettlementType="handleSelectSettlementType"
					@handleClassifyLongpress="handleDelClassify"
				/>
			</view>
		</view>
		
		<!-- 服务日期控件 -->
		<u-datetime-picker
			ref="datetimePicker"
			v-model="dates.time"
			:show="dates.show"
			mode="date"
			:formatter="formatter"
			@confirm="handleSelectDate"
			@cancel="handleCloseSelectDate"
		></u-datetime-picker>
	
		<!-- 故障分类弹窗 -->
		<u-picker
			title="故障分类"
			keyName="label"
			:show="classify.show"
			:columns="classify.columns"
			:defaultIndex="classify.defaultIndex"
			@confirm="selectRepairClassify"
			@cancel="closeRepairClassify"
		></u-picker>
		
		<!-- 填写故障件信息弹窗 -->
		<FaultInfo
			ref="fault"
			@handleAddRepairInfo="handleAddRepairInfo"
		/>
		
		<!-- 维修类型选择弹窗 -->
		<u-picker
			title="选择维修类型"
			keyName="label"
			:show="weixiu.show"
			:columns="weixiu.columns"
			:defaultIndex="weixiu.defaultIndex"
			@confirm="selectRepairType"
			@cancel="closeRepairType"
		></u-picker>
		
		<!-- 结算类型选择弹窗 -->
		<u-picker
			title="选择结算类型"
			keyName="label"
			:show="jiesuan.show"
			:columns="jiesuan.columns"
			:defaultIndex="jiesuan.defaultIndex"
			@confirm="selectSettlementType"
			@cancel="closeSettlementType"
		></u-picker>
	</view>
</template>

<script>
	import Cell from '@/components/Cell/index'
	import CellInput from '@/components/CellInput/index'
	import CellSwitch from '@/components/CellSwitch/index'
	import CustomRadio from '@/components/CustomRadio/index'
	import Classify from '@/components/Repair/Classify/index'
	import RepairDesc from '@/components/RepairDesc/index'
	import FaultInfo from '@/components/Repair/FaultInfo/index'
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	import { getSystemDate } from '@/utils/lib'
	
	export default {
		components: {
			Cell,
			CellInput,
			CellSwitch,
			CustomRadio,
			Classify,
			RepairDesc,
			FaultInfo
		},
		
		props: {
			// 页面风格：table 表格样式，input 输入框样式
			// 如果某个内容区域自定义了，那么以自定义为主
			theme: {
				type: String,
				default: 'input'
			},
			
			// 任务信息
			taskInfos: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			// 是否显示驳回原因
			isRejectedReason: {
				type: Boolean,
				default: false
			},
			
			// 驳回原因（只有 isRejectedReason 为 true 才生效）
			rejectedReason: {
				type: String,
				default: ''
			},
			
			// 是否显示驳回原因相关其他信息（除了驳回原因外）
			isShowRejectedInfo: {
				type: Boolean,
				default: false
			},
			
			// 驳回状态
			auditState: {
				type: String | Number | null,
				default: null
			},
			
			// 驳回时间
			auditDate: {
				type: String,
				default: ''
			},
			
			// 是否显示转单原因
			isTransferOrder: {
				type: Boolean,
				default: false
			},
			
			// 转单原因（只有 isTransferOrder 为 true 才生效）
			transferOrderReason: {
				type: String,
				default: ''
			},
			
			// 是否显示维修经理列表
			isShowManager: {
				type: Boolean,
				default: false
			},
			
			// 维修经理列表
			managerList: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			// CustomRadio 组件选择框样式
			customRadioIconType: {
				type: String,
				default: 'checkbox'
			},
			
			// 派工结果
			dispatchResult: {
				type: String,
				default: ''
			},
			
			// 派工结果人电话
			dispatchTel: {
				type: String,
				default: ''
			},
			
			// 车辆信息
			cartInfos: {
				type: Array,
				default: function() {
					return []
				}
			},
			
			// 是否可编辑故障件列表
			isAddRepair: {
				type: Boolean,
				default: false
			},
		},
		
		computed: {
			...mapState({
				currentField: state => state.repair.currentField,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList
			})
		},
		
		watch: {
			// 监听组件值是否被编辑了
			currentField(newVal, oldVal) {
				// 如果现场详情数据发生变化
				if (newVal === 'sceneDetails') {
					let data = {
						textMsgList: this.textMsgList,
						pictureList: this.pictureList,
						voiceList: this.voiceList,
						videoList: this.videoList
					}
					
					// 如果是现场描述详情，那么遍历 cartInfos 列表
					this.$emit('handleUpdateData', { type: 1, field: 'sceneDetails', attrs: 'textMsgList,pictureList,voiceList,videoList', data })
					
					// 重置状态管理
					this.resetVux()
				}
			}
		},
		
		data() {
			return {
				// 日期选择控件
				dates: {
					show: false,
					prop: '',
					time: Number(new Date()),
				},
				
				// 故障分类
				classify: {
					show: false,
					name: '', // 选中后的名称
					columns: [
						[
							{ label: '液压系统', id: 1 },
							{ label: '传动系统', id: 2 },
							{ label: '制动系统', id: 3 },
							{ label: '电气系统及仪表', id: 4 },
							{ label: '转向系统', id: 5 },
							{ label: '冷却系统', id: 6 },
							{ label: '外观及覆盖件', id: 7 },
							{ label: '起重系统', id: 8 },
							{ label: '动力系统', id: 9 },
						]
					],
					defaultIndex: [0],
				},
				
				// 维修类型
				weixiu: {
					show: false,
					columns: [
						[
							{ label: '非三包件', id: 1 },
							{ label: '股份三包', id: 2 },
							{ label: '网点三包', id: 3 }
						]
					],
					index: null, // 当前系统分类的索引
					defaultIndex: [0],
				},
				
				// 结算类型
				jiesuan: {
					show: false,
					columns: [
						[
							{ label: '实物结算', id: 1 },
							{ label: '货币结算', id: 2 },
						]
					],
					index: null, // 当前系统分类的索引
					defaultIndex: [0],
				},
			}
		},
		
		onUnload() {
			// 重置状态管理
			this.resetVux()
		},
		
		methods: {
			// 重置状态管理
			resetVux() {
				// 清空状态管理中的数据
				this.$store.commit('repair/setDescInfo', { type: 1, data: [] })
				this.$store.commit('repair/setDescInfo', { type: 2, data: [] })
				this.$store.commit('repair/setDescInfo', { type: 3, data: [] })
				this.$store.commit('repair/setDescInfo', { type: 4, data: [] })
				this.$store.commit('repair/setCurrentField', '')
			},
			
			// cellInput 组件中输入时的回调
			handleInput(val, row) {
				if (row && row.prop === 'cartNumber' && row.label === '车号') {
					let data = {
						value: val !== '' && val !== null && val !== undefined ? val.toUpperCase() : ''
					}
					
					this.$emit('handleUpdateData', { type: 1, field: 'cartNumber', attrs: 'value', data })
				}
			},
			
			// 点击 CellInput 组件左侧图标的回调
			handleClickLeftIcon(e, row) {
				this.$emit('handleClickLeftIcon', { e, row })
			},
			
			// 点击 CellInput 组件右侧图标的回调
			handleRightIconClick(e, row) {
				// 点击申请人电话图标，拨打电话
				if (row.prop === 'applyPerson') {
					this.callHim(this.dispatchTel)
				} else if (row.prop === 'cartNumber') {
					this.$emit('handleCartNumScan')
				}
			},
			
			// 点击 CellInput 组件表单内的图标的回调
			handleClickInputIcon(e, row) {
				// this.$emit('handleClickInputIcon', { e, row })
				// console.log(row)
			},
			
			// 打电话
			callHim(phone) {
				if (!phone) {
					Utils.popUpMsg('error', '暂无联系方式', 1000)
					return
				}
				
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			
			// 点击 Cell 组件的回调
			handleCellClick(e, row) {
				let cartNum = this.cartInfos.filter(item => item.prop === 'cartNumber' && item.label === '车号')[0].value
				
				uni.navigateTo({
					url: `/pages/repairManage/cartConfigInfo/cartConfigInfo?title=${ row.label }详情&cartNum=${cartNum}`
				})
			},
			
			// 切换维修经理时的回调
			handleChangeManager(e, row) {
				if (!this.isShowManager) return
				this.$emit('handleChangeManager', { e, row })
			},
			
			// 点击组件选择日期的回调
			handleDateComponent(e, row) {
				if (row.isEdit && row.prop === 'buyerTime') {
					this.handleShowSelectDate(row.prop)
				}
			},
			
			// 选择服务日期
			handleShowSelectDate(prop) {
				let data = {
					readonly: true,
				}
				
				this.$emit('handleUpdateData', { type: 1, field: this.dates.prop, attrs: 'readonly', data })
				this.dates.prop = prop
				this.dates.show = true
			},
			
			// 格式化日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				
				if (type === 'month') {
					return `${value}月`
				}
				
				if (type === 'day') {
					return `${value}日`
				}
				
				// if (type === 'hour') {
				// 	return `${value}点`
				// }
				
				// if (type === 'minute') {
				// 	return `${value}分`
				// }
				
				return value
			},
			
			// 选择日期
			handleSelectDate() {
				setTimeout(() => {
					let data = {
						value: getSystemDate(this.dates.time, 'yyyy/MM/dd'),
						readonly: false
					}
					// 如果是现场描述详情，那么遍历 cartInfos 列表
					this.$emit('handleUpdateData', { type: 1, field: this.dates.prop, attrs: 'value, readonly', data })
					this.handleCloseSelectDate()
				}, 0)
			},
			
			// 关闭选择服务日期弹窗
			handleCloseSelectDate() {
				this.dates.time = Number(new Date())
				this.dates.prop = ''
				this.dates.isRead = false
				this.dates.show = false
			},
			
			// 点击描述组件的回调
			handleRepairDesc(e, row) {
				// 回显媒体相关数据
				this.$store.commit('repair/setDescInfo', { type: 1, data: row.textMsgList })
				this.$store.commit('repair/setDescInfo', { type: 2, data: row.pictureList })
				this.$store.commit('repair/setDescInfo', { type: 3, data: row.voiceList })
				this.$store.commit('repair/setDescInfo', { type: 4, data: row.videoList })
				
				let querys = `type=1&title=${row.pageTitle}&isEdit=${row.isEdit}&currentField=${row.prop}`
				
				if (row.repairOrderId) {
					querys += `&repairOrderId=${ row.repairOrderId }`
				}
				
				uni.navigateTo({
					url: `/pages/desc/desc?${ querys }`
				})
			},
			
			// 点击添加故障件，弹出选择故障分类弹窗
			openRepairClassify() {
				this.classify.show = true
			},
			
			// 选择故障分类
			selectRepairClassify(e) {
				// 设置选中项的值
				this.classify.name = e.value[0].label
				
				// 关闭选择故障分类弹出
				this.closeRepairClassify()
				
				// 打开填写故障件信息弹窗
				this.$refs.fault.handleOpen()
			},
			
			// 关闭故障分类
			closeRepairClassify(e) {
				this.classify.defaultIndex = [0]
				this.classify.show = false
			},
			
			// 点击系统分类名称时的回调（展开/收起信息）
			handleExpand(index) {
				let repairList = JSON.parse(JSON.stringify(this.repairList))
				
				repairList.map((item, i) => {
					if (i === index) {
						item.isExpand = !item.isExpand
						
						return item
					}
				})
				
				this.$store.commit('repair/resetRepairComponent', repairList)
			},
			
			// 监听消耗数量变化
			handleWatchUsedQuantity({ index, row }) {
				this.$emit('handleWatchUsedQuantity', { index, row })
			},
			
			// 点击附件的回调
			handleAttachment({ index, row }) {
				uni.navigateTo({
					url: `/pages/desc/desc?type=2&title=${row.pageTitle}&index=${index}&isEdit=${row.isEdit}`
				})
			},
			
			// 填写完故障件信息后的回调
			handleAddRepairInfo(data) {
				data.classifyTitle = this.classify.name
				this.$emit('handleAddRepairInfo', data)
				this.classify.name = '' // 清除选择故障分类的名称
			},
			
			// 打开选择维修类型弹窗
			handleSelectRepairType(index) {
				this.weixiu.index = index
				this.weixiu.show = true
				this.showRepairTypeName(index)
			},
			
			// 回显维修类型数据
			showRepairTypeName(index) {
				let repairTypeName = null
				
				this.repairList.forEach((item, i) => {
					if (i === index) {
						repairTypeName = item.list.filter(j => j.prop === 'repairType')[0].value
					}
				})
				
				if (repairTypeName !== null && repairTypeName !== '') {
					let i = this.weixiu.columns[0].findIndex((h, i) => h.label === repairTypeName)
					
					this.weixiu.defaultIndex = [i]
				}
			},
			
			// 选择维修类型
			selectRepairType(e) {
				let name = e.value[0].label
				let list = JSON.parse(JSON.stringify(this.repairList))
				
				list.forEach((item, index) => {
					if (index === this.weixiu.index) {
						item.list.forEach(j => {
							if (j.prop === 'repairType') {
								j.value = name
							}
						})
					}
				})
				
				if (name === '股份三包') {
					list.forEach((item, index) => {
						if (index === this.weixiu.index) {
							item.list.push({
								label: '结算类型',
								value: '',
								prop: 'settlementType',
								textMsgList: [],
								pictureList: [],
								voiceList: [],
								videoList: [],
								isEdit: true,
							})
						}
					})
				} else {
					list.forEach((item, index) => {
						if (index === this.weixiu.index) {
							item.list.forEach((j, i) => {
								if (j.prop === 'settlementType') {
									item.list.splice(i)
								}
							})
						}
					})
				}
				
				this.$store.commit('repair/resetRepairComponent', list)
				this.$refs['classify' + this.weixiu.index][0].handleChangeRepairType(this.weixiu.index, name)
				this.closeRepairType()
			},
			
			// 关闭选择维修类型弹窗
			closeRepairType() {
				this.weixiu.defaultIndex = [0]
				this.weixiu.index = null
				this.weixiu.show = false
			},
			
			// 打开选择结算类型弹窗
			handleSelectSettlementType(index) {
				this.jiesuan.index = index
				this.jiesuan.show = true
				this.showSettlementTypeName(index)
			},
			
			// 回显维修类型数据
			showSettlementTypeName(index) {
				let settlementTypeName = null
				
				this.repairList.forEach((item, i) => {
					if (i === index) {
						settlementTypeName = item.list.filter(j => j.prop === 'settlementType')[0].value
					}
				})
				
				if (settlementTypeName !== null && settlementTypeName !== '') {
					let i = this.jiesuan.columns[0].findIndex((h, i) => h.label === settlementTypeName)
					
					this.jiesuan.defaultIndex = [i]
				}
			},
			
			// 长按某个故障件分类，提示是否删除此故障件
			handleDelClassify({ index, isDel }) {
				if (!this.isAddRepair) return // 如果不可编辑故障件列表，那么也不可以删除故障件
				if (!isDel) return // 如果明确指定不可删除故障件，那么直接 return
				
				Utils.modal('提示', '是否删除此故障件？', (res) => {
					if (res.confirm) {
						let obj = this.repairList.filter((item, i) => i === index)[0]
						
						// 如果删除的故障件是从后台查询过来的，需要将删除的故障件id传给父组件
						if (obj.repairOrderItemId !== '' && obj.repairOrderItemId !== null && obj.repairOrderItemId !== undefined) {
							this.$emit('handleDelRepairComponent', obj.repairOrderItemId)
						}

						this.$store.commit('repair/delRepairComponent', index)
					}
				})
			},
			
			// 选择结算类型
			selectSettlementType(e) {
				let name = e.value[0].label
				let list = JSON.parse(JSON.stringify(this.repairList))
				
				list.forEach((item, index) => {
					if (index === this.jiesuan.index) {
						item.list.forEach(j => {
							if (j.prop === 'settlementType') {
								j.value = name
							}
						})
					}
				})
				
				this.$store.commit('repair/resetRepairComponent', list)
				this.$refs['classify' + this.jiesuan.index][0].handleChangeRepairType(this.jiesuan.index, name)
				this.closeSettlementType()
			},
			
			// 关闭选择维修类型弹窗
			closeSettlementType() {
				this.jiesuan.index = null
				this.jiesuan.show = false
			},
		}
	}
</script>

<style>
</style>